/**
 * @File   : ExamInfo.js
 * @Author : xue.xiaoBing
 * @Date   : 2021/4/23
 * @Desc   : 考试信息页面
 **/

import React, {Component} from "react";
import {NavLink} from "react-router-dom";
import {
  Row, Col, Breadcrumb, Space, Popover, Progress, Button, Tabs,
  Divider
} from "antd/lib/index";

import {
  UsergroupAddOutlined, ShareAltOutlined, SettingOutlined, LogoutOutlined, PieChartOutlined,
  WechatOutlined, WeiboOutlined, QqOutlined, FieldTimeOutlined
} from "@ant-design/icons";

import UserImg from "src/assets/images/userLogo.jpg";
import HomeHeader from "src/components/head/homeHeader/HomeHeader";

const {TabPane} = Tabs;


class ExamInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  render() {
    return (
      <div>
        <div>
          <HomeHeader/>
        </div>
        <div style={{backgroundColor: 'rgba(0,0,0,.1)', padding: '20px 15%', minHeight: 'calc(100vh - 50px)'}}>
          <Space direction={'vertical'} style={{width: '100%'}} size={20}>
            <div justify={'spacing-around'}>
              <Breadcrumb>
                <Breadcrumb.Item>
                  <a href="/">首页</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                  <a href="/exam">考试</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>考试信息</Breadcrumb.Item>
              </Breadcrumb>
            </div>
            <div style={{
              width: '100%',
              height: '230px',
              backgroundColor: 'white',
              borderRadius: '5px'
            }}>
              <Row style={{padding: '10px 20px'}}>
                <Col span={19}>
                  <span style={{verticalAlign: 'middle', fontSize: '20px'}}>考试内容</span>
                </Col>
                <Col span={5} style={{textAlign: 'right'}}>
                  <UsergroupAddOutlined style={{width: '30px', height: '30px'}}/>
                  <span>3人</span>
                  <Popover placement="top" trigger="click"
                           content={
                             <Space size={20}>
                               <WechatOutlined/>
                               <WeiboOutlined/>
                               <QqOutlined/>
                             </Space>
                           }>
                    <ShareAltOutlined style={{width: '30px', height: '30px', marginLeft: '20px'}}/>
                  </Popover>
                  <SettingOutlined style={{width: '30px', height: '30px'}}/>
                  <LogoutOutlined style={{width: '30px', height: '30px'}}/>
                </Col>
                <Col span={24}>
                  <Row justify={'space-around'} align={'middle'}
                       style={{padding: '20px 40px', backgroundColor: 'rgba(0,0,0,.08)', borderRadius: '5px'}}>
                    <Col span={5} style={{textAlign: 'center'}}>
                      <Progress type="circle" percent={75} format={percent => `${percent}%`}/>
                    </Col>
                    <Col span={14} style={{textAlign: 'center'}}>
                      <Row justify={'center'}>
                        <Col span={6}>
                          <p><FieldTimeOutlined style={{marginRight: '10px', color: 'red'}}/>考试时长</p>
                          <p style={{fontSize: '20px'}}><span style={{color: '#36964d'}}>30</span>
                            <span style={{marginLeft: '10px'}}>分钟</span></p>
                        </Col>
                        <Col span={6}>
                          <p><FieldTimeOutlined style={{marginRight: '10px', color: '#43bc60'}}/>起止时间</p>
                          <p style={{fontSize: '20px'}}>12:30--13:30</p>
                        </Col>
                        <Col span={6}>
                          <p><PieChartOutlined style={{marginRight: '10px', color: 'red'}}/>试卷总分</p>
                          <span style={{marginLeft: '10px', fontSize: '20px'}}>100 分</span>
                        </Col>
                        <Col span={6}>
                          <p><PieChartOutlined style={{marginRight: '10px', color: '#43bc60'}}/>试卷得分</p>
                          <p style={{fontSize: '20px'}}><span style={{color: '#36964d'}}>30 分</span></p>
                        </Col>
                      </Row>
                    </Col>
                    <Col span={5} style={{textAlign: 'center'}}>
                      <Button href={'/exam/startExam/1/1'} size={'large'} type={'primary'}>开始考试</Button>
                    </Col>
                  </Row>
                </Col>
              </Row>
            </div>
            <div>
              <Row style={{height: '230px'}} justify={'space-around'}>
                <Col span={17} style={{backgroundColor: 'white', borderRadius: '5px', padding: '10px 20px'}}>
                  <Tabs defaultActiveKey="1" style={{width: '100%'}}>
                    <TabPane tab="目录" key="1">
                      Content of Tab Pane 1
                    </TabPane>
                    <TabPane tab={<span>话 题 <span>(5)</span> </span>} key="2">
                      Content of Tab Pane 2
                    </TabPane>
                    <TabPane tab={<span>问 题 <span>(5)</span> </span>} key="3">
                      Content of Tab Pane 3
                    </TabPane>
                    <TabPane tab={<span>笔 记 <span>(5)</span> </span>} key="4">
                      Content of Tab Pane 3
                    </TabPane>
                  </Tabs>
                </Col>
                <Col span={6} offset={1}>
                  <div style={{backgroundColor: 'white', padding: '10px 20px', borderRadius: '5px'}}>
                    <span style={{verticalAlign: 'middle', fontSize: '20px'}}>出题老师</span>
                    <Divider style={{margin: '15px 0px'}}/>
                    <Row>
                      <Col span={8}>
                        <img src={UserImg} alt="" style={{width: '60px', height: '60px', borderRadius: '50%'}}/>
                      </Col>
                      <Col span={16}>
                        <p>姓名：张三</p>
                        <p>职位：数学老师</p>
                      </Col>
                    </Row>
                  </div>

                  <div style={{backgroundColor: 'white', padding: '10px 20px', borderRadius: '5px', marginTop: '20px'}}>
                    <span style={{verticalAlign: 'middle', fontSize: '20px'}}>考试学员</span>
                    <Divider style={{margin: '15px 0px'}}/>
                    <Row>
                      <Col span={8}>
                        <Space>
                          <img src={UserImg} style={{width: '40px', height: '40px', borderRadius: '50%'}} alt={''}/>
                          <img src={UserImg} style={{width: '40px', height: '40px', borderRadius: '50%'}} alt={''}/>
                          <img src={UserImg} style={{width: '40px', height: '40px', borderRadius: '50%'}} alt={''}/>
                          <img src={UserImg} style={{width: '40px', height: '40px', borderRadius: '50%'}} alt={''}/>
                          <img src={UserImg} style={{width: '40px', height: '40px', borderRadius: '50%'}} alt={''}/>
                        </Space>
                      </Col>
                    </Row>
                  </div>
                  <div style={{backgroundColor: 'white', padding: '10px 20px', borderRadius: '5px', marginTop: '20px'}}>
                    <span style={{verticalAlign: 'middle', fontSize: '20px'}}>考试动态</span>
                    <Divider style={{margin: '15px 0px'}}/>
                    <p>admin开始了<NavLink to={'/'}>数学阶段性测试</NavLink>  的考试</p>
                  </div>
                </Col>
              </Row>
            </div>
          </Space>
        </div>
      </div>
    )
  }
}

export default ExamInfo